<template>
	<view :class="['cash',device == 'ios'?'iosPadding':'androidPadding']">
		<view :class="device=='ios'?'ios_pageTitle':'and_pageTitle'">
			<view class="statusBar"></view>
			<view :class="['pageTitle','dFlex','jBetween_aCenter']">
				<view class="backIcon imgPublic" @tap='tool.back()'>
					<image src="../static/images/back.png" mode="widthFix"></image>
				</view>
				<view class="title">申请提现</view>
				<view class="backIcon imgPublic"></view>
			</view>
		</view>
		<view class="container">
			<view class="bgColor dFlex flexDirection jCenter_aCenter">
				<text>洗护金</text>
				<view class="showCount">{{userInfo.wallet}}</view>
			</view>
			<view class="tixian">
				<view class="part1" >
					<view class="tit">提现说明</view>
					<view class="toast" style="color:red;" v-html="expend_content"></view>
				</view>
				<view class="part1">
					<view class="tit">提现金额</view>
					<view class="partIpt dFlex jStart_aCenter">
						<!-- <view class="iptTit"></view> -->
						<view class="ipt">
							<input type="number" v-model="amount" :max='userInfo.wallet' placeholder="请输入提现金额">
						</view>
					</view>
					
				</view>
				
				<view class="line dFlex jBetween_aCenter" >
					<view class="lineTit" style="font-weight: 700;font-size: 16px;">提现方式</view>
					<view class="lineVal dFlex jEnd_aCenter" @tap='change_sel(1)'>
						<view class="showVal">{{expendtype}}</view>
						<view class="rightIcon imgPublic">
							<image src="../static/images/rightIcon.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="part1" style="margin-top: 20px;margin-bottom: 50px;" v-if='expend_type == "1"'>
					<view class="tit dFlex jBetween_aCenter">
						<text>提现账户</text>
						<view class="other" @tap='selBank'>选择账户</view>
					</view>
					<view class="partIpt dFlex jStart_aCenter">
						<view class="iptTit">姓名</view>
						<view class="ipt">
							<input type="text" v-model="trueName" placeholder="请输入持卡人姓名">
						</view>
					</view>
					<view class="partIpt dFlex jStart_aCenter">
						<view class="iptTit">银行账号</view>
						<view class="ipt">
							<input type="number" v-model="account" placeholder="请输入银行账号">
						</view>
					</view>
					<view class="partIpt dFlex jStart_aCenter">
						<view class="iptTit">开户银行</view>
						<view class="ipt">
							<input type="text" v-model="bank_name" placeholder="请输入开户银行如:招商银行深圳分行高新园支行">
						</view>
					</view>
					<view class="partIpt dFlex jStart_aCenter">
						<view class="iptTit">手机号码</view>
						<view class="ipt">
							<input type="number" v-model="tel" placeholder="请输入手机号码">
						</view>
					</view>
				</view>
				<view class="part1" style="margin-top: 20px;margin-bottom: 50px;" v-if='expend_type == "2"'>
					<view class="tit dFlex jBetween_aCenter">
						<text>提现账户</text>
					</view>
					<view class="partIpt dFlex jStart_aCenter">
						<view class="iptTit">姓名</view>
						<view class="ipt">
							<input type="text" v-model="trueName" placeholder="请输入姓名">
						</view>
					</view>
					<view class="partIpt dFlex jStart_aCenter">
						<view class="iptTit">支付宝账号</view>
						<view class="ipt">
							<input type="text" v-model="account" placeholder="请输入支付宝账号">
						</view>
					</view>
					
				</view>
				
			</view>
		</view>
		<view class='btns' style="z-index: 999	;" @tap='subInfo'>立即提现</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				identity:uni.getStorageSync('identify')?uni.getStorageSync('identify'):'1',
				device: getApp().globalData.platform,
				userInfo:{},
				trueName:'',
				amount:'',
				account:'',
				tel:'',
				bank_name:'',
				expendtype:'支付宝',
				expend_type:2,
				is_expend:1,
				is_alipay:1,
				is_change:1,
				expend_content:'',
				source:1,
				list:['银行卡', '支付宝'],
				bankId:0
			};
		},
		onLoad(e) {
			console.log(e.bankId);
			if(e.bankId){
				this.bankId=e.bankId
				this.tool.getData('User/bankInfo',{
					id:e.bankId,
				}).then(res=>{
					console.log(res);
					if(res){
						this.account = res.bank_number;
						this.trueName = res.trueName;
						this.tel =res.tel;
						this.bank_name = res.bank;
						this.expend_type =1;
						this.expendtype ='银行卡';
						this.expend_content=res.expend_content
					}
				}).catch(err=>{
					console.log(err);
				})
				
			}
				if(this.identity == '1'){
					this.initUser();
				}else{
					this.initStaff();
				}
			
			
		},
		onShow(){
			
		},
		onShareAppMessage() {
			return{
				title:'洗匣士~您的家居窗帘清洗助手',
				path:'/pages/home?spreadId=' + (uni.getStorageSync('userId')?uni.getStorageSync('userId'):''),
				imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		onShareTimeline() {
			return{
				title:'洗匣士~您的家居窗帘清洗助手',
				path:'/pages/home?spreadId=' + (uni.getStorageSync('userId')?uni.getStorageSync('userId'):''),
				imageUrl:getApp().globalData.imgDomain+'public/logo.png',
				desc:'手机下单 | 专员取送 | 生态环保 | 轻奢洗护',
			}
		},
		methods:{
			// 修改选择项
			change_sel(idx) {
				if(this.is_alipay==2){
					this.list= ['银行卡', '支付宝'];
				}else{
					this.list= ['银行卡'];
				}
				
				uni.showActionSheet({
					itemList: this.list,
					success: (tap) => {
						if (idx == '1') {
							this.expendtype= this.list[tap.tapIndex];
							this.expend_type = tap.tapIndex+1;
							this.is_change=2;
							this.account = '';
							this.trueName = '';
							this.tel = '';
							this.bank_name = '';
							if(this.identity == '1'){
								this.initUser();
							}else{
								this.initStaff();
							}
						}
					}
				})
			},
			initUser(){
				this.tool.getUserInfo().then(res=>{
					if(res){
						this.userInfo = res;
						this.is_alipay=res.is_alipay;
						if(this.is_change==1){
							if(this.is_alipay==2){
								this.expendtype= '支付宝';
							}else{
								this.expendtype= '银行卡';
							}
							this.expend_type=res.is_alipay;
						}
						
						this.expend_content=res.expend_content2;
						if(this.expend_type==1&&this.bankId==0){
							this.account = res.expend1.account;
							this.trueName = res.expend1.trueName;
							this.tel = res.expend1.tel;
							this.bank_name = res.expend1.bank_name;
						}
						if(this.expend_type==2){
							this.account = res.expend2.account;
							this.trueName = res.expend2.trueName;
						}
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			initStaff(){
				this.tool.getStaffInfo().then(res=>{
					console.log(res);
					if(res){
						this.userInfo = res;
						this.is_alipay=res.is_alipay;
						if(this.is_change==1){
							if(this.is_alipay==2){
								this.expendtype= '支付宝';
							}else{
								this.expendtype= '银行卡';
							}
							this.expend_type=res.is_alipay;
						}
						this.expend_content=res.expend_content2;
						if(this.expend_type==1&&this.bankId==0){
							this.account = res.expend1.account;
							this.trueName = res.expend1.trueName;
							this.tel = res.expend1.tel;
							this.bank_name = res.expend1.bank_name;
						}
						if(this.expend_type==2){
							this.account = res.expend2.account;
							this.trueName = res.expend2.trueName;
						}
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 选择银行卡
			selBank(){
				uni.navigateTo({
					url:'./bank'
				})
			},
			// 提交提现信息
			subInfo(){
				// #ifdef APP-PLUS
				this.source=1;
				if(this.userInfo.is_ok != '2'){
					uni.showToast({
						title:'请先完成实名认证',
						icon:'none'
					})
					setTimeout(()=>{
						uni.redirectTo({
							url:'./unAuthen'
						})
					},1650)
					return
				}
				// #endif
				// #ifdef MP-WEIXIN
				this.source=2;
				if(this.userInfo.is_ok != '2'){
					uni.showModal({
						title:'实名认证通过以后才能提现，小程序用户请先下载洗匣士APP进行实名认证',
						icon:'none'
					})
					return
				}
				
				// #endif
				if(!this.amount){
					uni.showToast({
						title:'请输入提现金额',
						icon:'none'
					})
					return
				}
				if(parseFloat(this.amount)>parseFloat(this.userInfo.wallet)){
					uni.showToast({
						title:'钱包余额不足',
						icon:'none'
					})
					return
				}
				if(this.amount % 1 != 0){
					uni.showToast({
						title:'提现金额应为整数',
						icon:'none'
					})
					return
				}
				if((!this.trueName || !this.amount || !this.account || !this.tel || !this.bank_name)&&this.expend_type==1){
					uni.showToast({
						title:'银行信息填写不完整',
						icon:'none'
					})
					return
				}
				if((!this.trueName || !this.amount)&&this.expend_type==2){
					uni.showToast({
						title:'支付宝信息填写不完整',
						icon:'none'
					})
					return
				}
				this.tool.getData('User/checkexpend',{
					memberId:uni.getStorageSync('userId'),
					storeId:uni.getStorageSync('storeId')
				}).then(res=>{
					console.log(res);
					if(res.is_expend==2){  //今日已提现
						uni.showToast({
							title:'今日已提现',
							icon:"success"
						})
					}else{
						uni.showModal({
							  title: '提示',
							  content: '确定要执行此操作吗？',
							  success: (res) => {
								if (res.confirm) {
									  console.log('用户点击确定');
									  this.tijiao();
								} else if (res.cancel) {
								  console.log('用户点击取消');
								  // 执行取消操作
								}
							  }
						});
					}
				})
				
				
			},
			tijiao(){
				// 执行确定操作
				if(this.identity == '1'){
					this.tool.getData('User/doChange',{
						memberId:uni.getStorageSync('userId'),
						trueName:this.trueName,
						amount:this.amount,
						account:this.account,
						tel:this.tel,
						bank_name:this.bank_name,
						expend_type:this.expend_type,
						source:this.source,
						type:'5'
					}).then(res=>{
						
						console.log(res);
						if(res.is_pay==2){
							this.is_expend=2;
							uni.showToast({
								title:'提现成功',
								icon:"success"
							})
							setTimeout(()=>{
								this.tool.back();
							},1650)
						}else if(res){
							this.is_expend=2;
							uni.showToast({
								title:'提现申请已提交',
								icon:"success"
							})
							setTimeout(()=>{
								this.tool.back();
							},1650)
						}
						
					}).catch(err=>{
						console.log(err);
					})
				}else{
					this.tool.getData('User/doChange',{
						storeId:uni.getStorageSync('storeId'),
						trueName:this.trueName,
						amount:this.amount,
						account:this.account,
						tel:this.tel,
						bank_name:this.bank_name,
						expend_type:this.expend_type,
						source:this.source,
						type:'3'
					}).then(res=>{
						
						console.log(res);
						if(res.is_pay==2){
							this.is_expend=2;
							uni.showToast({
								title:'提现成功',
								icon:"success"
							})
							setTimeout(()=>{
								this.tool.back();
							},1650)
						}else if(res){
							this.is_expend=2;
							uni.showToast({
								title:'提现申请已提交',
								icon:"success"
							})
							setTimeout(()=>{
								this.tool.back();
							},1650)
						}
					}).catch(err=>{
						console.log(err);
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		// background: white;
	}
	.line {
		width: 100%;
		padding: 12px 0;
		box-sizing: border-box;
		border-bottom: 1px solid #E8E8E8;
	
		.lineTit {
			max-width:40%;
			min-width:25%;
		}
	
		.lineVal {
			flex: 1;
			color: #333333;
	
			.showVal {
				flex: 1;
				text-align: right;
	
				input {
					width: 100%;
					text-align: right;
				}
			}
	
			.rightIcon {
				width: 15px;
				margin-left: 8px;
			}
		}
	}
	
	.line:last-child {
		border: none;
	}
	.cash{
		width: 100%;
		.btns{
			width: 100%;
			position: fixed;
			left:0;
			bottom: 0;
			color: white;
			background: linear-gradient(#609ff8 0%, #1664ff 100%);
			border-radius: 5px;
			padding: 12px 0;
			text-align: center;
		}
		.container{
			width: 100%;
			.tixian{
				width: 100%;
				padding: 20px 4%;
				box-sizing: border-box;
				.part1{
					width: 100%;
					margin-bottom: 20px;
					.toast{
						color: #999999;
						margin-top: 12px;
					}
					.partIpt{
						width: 100%;
						background: #ffffff;
						border-radius: 5px;
						box-shadow: 3.29px 6.74px 10px 0px rgba(87,85,217,0.10); 
						padding: 16px;
						box-sizing: border-box;
						margin-bottom: 12px;
						.iptTit{
							width: 25%;
						}
						.ipt{
							flex: 1;
						}
					}
					.partIpt:last-child{
						margin: 0;
					}
					.tit{
						width: 100%;
						font-size: 16px;
						font-weight: bold;
						margin-bottom: 12px;
						.other{
							color: #1664FF;
							font-size: 14px;
							font-weight: 400;
						}
					}
				}
			}
			.bgColor{
				width: 100%;
				background: linear-gradient(0deg,#609ff8 0%, #0e64ff 100%);
				// height: calc(195px - var(--status-bar-height) - 57px);
				padding: 16px 0 20px;
				color: white;
				font-size: 16px;
				.showCount{
					font-size: 36px;
					font-weight: bold;
					margin-top: 6px;
				}
			}
		}
	}
	.ios_pageTitle,
	.and_pageTitle {
		background: #0e64ff;
		color: white;
	}
</style>
